<template>
	<view class="wrap">
		<scroll-view class="cate_menu">
			<view class="cate_item" :class="active == 0 ? 'active' : ''" @click="toggle_tab(0)">全部</view>
			<view class="cate_item" :class="active == item.category_id ? 'active' : ''" v-for="(item, i) in category" @click="toggle_tab(item.category_id)">{{item.name}}</view>
		</scroll-view>
		<scroll-view class="cate_goods" scroll-y="true">
			<view class="goods_item" v-for="(item, i) in goods" :key="i"  @click="toDetail(item.goods_id)">
				<view class="goods_item_l">
					<image :src="item.file_path" mode=""></image>
					<view class="c_fix"  v-if="item.stock_total == 0">
						<text>已售罄</text>
					</view>
				</view>
				<view class="goods_msg">
					<view class="goods_title">{{item.goods_name}}</view>
					<view class="goods_hot">{{item.selling_point}}</view>
					<view class="goods_spin">销量：{{item.sales}}</view>
					<view class="goods_pirce">
						<text class="sale_pirce">￥{{item.goods_price_min}}</text>
						<text class="line_pirce">￥{{item.line_price_min}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	
	import {
		get_category,
		get_goods_list
	} from "../../api/category.js"
	
	// 分类
	const category = ref([]);
	// 商品
	const goods = ref([]);
	// 分类选中
	const active = ref(0);
	const p = ref(1);
	
	onShow(() => {
		categorys();
		if(!active.value){
			let category_id = uni.getStorageSync('category_id');
				category_id != 0  ? active.value = category_id : active.value = 0;
				uni.setStorageSync('category_id', 0)
		}	
		get_goods(active.value, p.value)
	});
	
	
	// 监听上拉加载事件
	onReachBottom(() => {
		p.value++;
		get_goods_list(active.value, p.value).then(res => {
			let data = res.data;
				goods.value = goods.value.concat(data);
		})
	});
	
	// 分类数据
	function categorys() {
		get_category().then(res => {
			let data = res.data;
			category.value = data;
		})
	}
	
	// 获取商品
	function get_goods(category_id, p){
		get_goods_list(category_id, p).then(res => {
			let data = res.data;
			goods.value = data;
		})
	}
	
	// 选择分类
	function toggle_tab(category_id){
		active.value = category_id;
		p.value = 1;
		get_goods(category_id, 1);
	}
	
	// 跳转商品详情
	function toDetail(goods_id){
		uni.navigateTo({
		    url: `/pages/goods/detail?goods_id=${goods_id}`
		});
	}
	
</script>


<style lang="scss" scoped>
	page{
		background-color: #f8f8f8 !important;
	}
	.wrap{
		overflow: auto;
		background-color: #f8f8f8 !important;
	}
	.cate_menu {
		width: 24%;
		height: 100vh;
		float: left;
		position: fixed;
		border-right: 1px solid #eee;
		background-color: #fff;
		.cate_item {
			text-align: center;
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #666;
		}

		.active {
			background-color: #f8f8f8;
			color: #f9ae3d;
			font-weight: 600;
		}
	}

	.cate_goods {
		width: 75%;
		float: right;
		.goods_item {
			width: 100%;
			background-color: #fff;
			padding: 20rpx;
			overflow: hidden;
			display: flex;
			margin-bottom: 10rpx;
			border-radius: 5px;
			.goods_item_l {
				width: 150rpx;
				height: 150rpx;
				overflow: hidden;
				position: relative;

				.c_type {
					position: absolute;
					top: 12rpx;
					left: -20rpx;
					z-index: 10;
					width: 154rpx;
					padding: 3px 0;
					background: #a771ff;
					font-size: 24rpx;
					text-align: center;
					color: #ffffff;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					-webkit-transform-origin: 100rpx 100rpx;
					transform-origin: 100rpx 100rpx;
				}
			}

			image {
				width: 150rpx;
				height: 150rpx;
				float: left;
				border-radius: 5px;
			}

			.goods_msg {
				width: 370rpx;
				padding: 0 10rpx;

				.goods_title {
					font-size: 26rpx;
					color: $uni-text-color;
					width: 100%;
					height: 40rpx;
					overflow: hidden;
				}

				.goods_hot {
					font-size: 24rpx;
					color: #ff7500;
					width: 100%;
					height: 34rpx;
					overflow: hidden;
				}

				.goods_spin {
					font-size: 26rpx;
					color: #666;
				}

				.goods_pirce {
					padding-top: 5rpx;

					.sale_pirce {
						font-size: 28rpx;
						color: #F00;
					}

					.line_pirce {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through;
						padding-left: 20rpx;
					}
				}
			}
		}
		.c_fix {
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			background: rgba(0, 0, 0, .3);
		
			text {
				width: 150rpx;
				height: 150rpx;
				display: block;
				margin: auto;
				z-index: 101;
				border-radius: 100%;
				text-align: center;
				color: #fff;
				line-height: 140rpx;
				font-size: 28rpx;
			}
		}
	}


	
</style>